<template>
  <div class="runborder">
    <!-- 订单数据 -->
    <div class="orderDataBox flex">
      <div
        v-for="(item, index) in orderNum"
        :key="'orderData' + index"
        class="orderDataBoxItem flex-center"
        :style="{color: item.color, backgroundColor: item.bgColor}"
      >
        <img :src="item.imgUrl" />
        <div style="flex-direction: column; text-align:center">
          <div class="font14">{{ item.title }}</div>
          <!-- <div class="font24 fontBold">{{ item.value}}</div> -->
          <div class="font24 fontBold" v-if="index==0">{{ item.value==0?73:item.value }}</div>
          <div class="font24 fontBold" v-else-if="index==1">{{ item.value==0?43:item.value }}</div>
          <div class="font24 fontBold" v-else-if="index==2">{{ item.value==0?10581 :item.value }}</div>
          <div class="font24 fontBold" v-else-if="index==3">{{ item.value==0?556:item.value }}</div>
          <div class="font24 fontBold" v-else-if="index==4">{{ item.value==0?2996:item.value }}</div>
        </div>
      </div>
    </div>
    <!-- 列表数据 -->
    <div class="listData flex">
      <div class="listDataLeft flexColumn">
        <div class="listTitle flex-align-center">
          <img src="../../../assets/icons/orderListIcon.png" />订单列表
          <ul>
            <li
              @click="allSeq(index)"
              :class="{styleName:index == current}"
              v-for="(item,index) in seqList"
              :key="index"
            >{{item.seqName}}</li>
          </ul>
        </div>
        <div class="listSearch">
          <div class="searchBox relative">
            <a-button type="primary" class="searchBtn fr">搜索</a-button>
            <a-input ref="searchInput" v-model="searchData" placeholder="请输入关键词搜索">
              <a-icon type="search" slot="prefix" style="color: #4BB7FF" />
            </a-input>
          </div>
        </div>
        <div class="flex1 flexColumn orderListBox">
          <div
            v-for="(item, index) in orderList"
            :key="'orderList' + index"
            class="flex relative"
            :class="{'active': currentIndex === index}"
            @click="switchListIndex(index)"
          >
            <span class="itemTitle">{{ item.salBillno }}</span>
            <span class="itemValue">{{ item.salQty }} 件</span>
            <span class="itemTime">{{item.salDate}}</span>
            <!-- {{ util.timeFormat(item.time) }} -->
            <span v-if="currentIndex === index" class="triangle"></span>
          </div>
        </div>
      </div>
      <!-- 流程盒子 -->
      <div class="listDataCenter">
        <div class="centerBox flexColumn">
          <!-- <video id="videoElement" controls autoplay muted width="994px" height="514px"></video> -->
          <div class="centerTitle flex-align-center">
            <span class="centerTitleText flex-align-center">
              <img src="../../../assets/icons/orderProgressIcon.png" />订单流程
            </span>
            <img
              v-if="!stopLoop"
              src="../../../assets/icons/fullScreen.png"
              class="finger"
              @click="fullScreenCenter"
            />
          </div>
          <div class="flex1 processBox flex-center">
            <div class="progressImgBox">
              <div class="progressFlow" v-for="(item,index) in realTimeList" :key="index">
                <div v-if="index==3 || index==4">{{item.type}}{{index}}-----</div>
                <div v-else-if="3<index<8">{{item.type}}{{index}}</div>
                <div v-else>{{item.type}}{{index}}</div>
              </div>

              <!-- <img :src="require('../../../assets/bg/progress' + bgIndex + '.jpg')" /> -->
            </div>
          </div>
          <div class="centerLabelBox flex-align-center">
            <span class="labelBox bg-blue"></span>
            <span>已完成</span>
            <span class="labelBox bg-gray"></span>
            <span>未开始</span>
            <span class="labelBox bg-yellow"></span>
            <span>进行中</span>
            <span class="labelBox bg-red"></span>
            <span>异常延期</span>
          </div>
        </div>
      </div>
      <!-- 右边内容 -->
      <div class="listDataRight flexColumn">
        <div class="flex1">
          <a-tabs default-active-key="1">
            <a-tab-pane key="1">
              <span slot="tab">
                <a-icon type="alert" />生产报警
              </span>
              <div class="flex1 flexColumn" style="overflow: auto;
    height:230px;">
                <div
                  v-for="(item, index) in alermFile"
                  :key="'alarmList' + index"
                  class="itemBox finger"
                  @click="alarmWindow(item)"
                >
                  <div class="itemTop relative">
                    <span class="round bg-red"></span>
                    <div style="display:block;width:100%">【{{ item.alertTypeName }}】</div>
                    <div style="display:block" class="color-red">{{ item.alertTitle }}</div>
                  </div>
                  <div class="itemBottom">
                    <span class="color-red">{{ item.status }}</span>
                    <span>{{ util.timeFormat2(item.alertCreateTime) }}</span>
                  </div>
                </div>
              </div>
            </a-tab-pane>
            <a-tab-pane key="2" force-render>
              <span slot="tab">
                <a-icon type="sound" />实时内容
              </span>
              <div class="flex1 flexColumn" style="overflow: auto;
    height:230px;">
                <div
                  v-for="(item, index) in realTimeList"
                  :key="'alarmList' + index"
                  class="itemBox"
                >
                  <div class="itemTop flex relative">
                    <span class="round bg-blue"></span>
                    <span>【{{ item.type }}】</span>
                    <span class="color-blue">{{ item.title }}</span>
                  </div>
                  <div class="itemBottom flex">
                    <span class="color-blue">{{ item.status }}</span>
                    <!-- <span>{{ util.timeFormat2(item.time) }}</span> -->
                    <span>{{item.time}}</span>
                  </div>
                </div>
              </div>
            </a-tab-pane>
          </a-tabs>
        </div>
        <div class="listTitle flex-align-center">
          <img src="../../../assets/icons/commuIcon.png" />企业通讯
        </div>
        <div class="flex1 productDataRight">
          <a-tabs default-active-key="1">
            <a-tab-pane key="1">
              <span slot="tab">
                <a-icon type="team" />联系人
              </span>
              <a-directory-tree multiple default-expand-all>
                <a-tree-node key="0-1" title="富润通科技(204)">
                  <a-tree-node key="0-1-0" title="龙华人事部(6)" is-leaf />
                  <a-tree-node key="0-1-1" title="龙华财务部(2)" is-leaf />
                  <a-tree-node key="0-1-2" title="龙华制造部(135)" is-leaf />
                  <a-tree-node key="0-1-3" title="龙华品质部(14)" is-leaf />
                  <a-tree-node key="0-1-4" title="龙华工程部(24)" is-leaf />
                  <a-tree-node key="0-1-5" title="龙华维修部(16)" is-leaf />
                  <a-tree-node key="0-1-6" title="龙华资材部(20)" is-leaf />
                </a-tree-node>
                <a-tree-node key="0-2" title="品新科技(311)">
                  <a-tree-node key="0-2-0" title="盐田人力行政部(11)" is-leaf />
                  <a-tree-node key="0-2-1" title="盐田财务部(1)" is-leaf />
                  <a-tree-node key="0-2-2" title="盐田制造部(217)" is-leaf />
                  <a-tree-node key="0-2-4" title="盐田品质部(33)" is-leaf />
                  <a-tree-node key="0-2-5" title="盐田工程部(16)" is-leaf />
                  <a-tree-node key="0-2-6" title="盐田资财部(17)" is-leaf />
                  <a-tree-node key="0-2-7" title="盐田实验室(12)" is-leaf />
                  <a-tree-node key="0-2-8" title="技嘉驻场(4)" is-leaf />
                </a-tree-node>
                <a-tree-node key="0-0" title="榕树数智(20)">
                  <a-tree-node key="0-0-0" title="运维(10)">
                    <a-tree-node key="0-0-0-0" title="柯伟波" is-leaf />
                    <a-tree-node key="0-0-0-1" title="车伟光" is-leaf />
                    <a-tree-node key="0-0-0-2" title="张兴" is-leaf />
                    <a-tree-node key="0-0-0-3" title="何锦伦" is-leaf />
                    <a-tree-node key="0-0-0-4" title="柯伟波" is-leaf />
                    <a-tree-node key="0-0-0-5" title="卿刘洋" is-leaf />
                    <a-tree-node key="0-0-0-6" title="周凌翔" is-leaf />
                    <a-tree-node key="0-0-0-7" title="张守川" is-leaf />
                    <a-tree-node key="0-0-0-8" title="江伟彬" is-leaf />
                    <a-tree-node key="0-0-0-9" title="唐夏" is-leaf />
                  </a-tree-node>
                  <a-tree-node key="0-0-1" title="产品开发团队(10)">
                    <a-tree-node key="0-0-1-0" title="朱明华" is-leaf />
                    <a-tree-node key="0-0-1-1" title="唐勇" is-leaf />
                    <a-tree-node key="0-0-1-2" title="赖均煊" is-leaf />
                    <a-tree-node key="0-0-1-3" title="李志强" is-leaf />
                    <a-tree-node key="0-0-1-4" title="戴传根" is-leaf />
                    <a-tree-node key="0-0-1-5" title="廖星" is-leaf />
                    <a-tree-node key="0-0-1-6" title="李小平" is-leaf />
                    <a-tree-node key="0-0-1-7" title="蒋良政" is-leaf />
                    <a-tree-node key="0-0-1-8" title="耿潼飞" is-leaf />
                    <a-tree-node key="0-0-1-9" title="黄洁" is-leaf />
                  </a-tree-node>
                </a-tree-node>
              </a-directory-tree>
            </a-tab-pane>
            <a-tab-pane key="2">
              <span slot="tab">
                <a-icon type="message" />消息通知
              </span>
              <div class="rightList flex1">
                <div
                  v-for="(item, index) in messageData"
                  :key="'messageData' + index"
                  class="flex-align-center"
                >
                  <div
                    class="albumBox bg-blue flex-center"
                    :style="{backgroundColor: item.color}"
                  >{{ item.album }}</div>
                  <div class="contentBox">
                    <div class="topBox flex-align-center">
                      <span>{{ item.name }}</span>
                      <span class="font12">下午 14:59</span>
                    </div>
                    <div class="bottomBox font10 more">{{ item.message }}</div>
                  </div>
                </div>
              </div>
            </a-tab-pane>
          </a-tabs>
          <!-- <div class="rightNav flex">
            <div class="flex-align-center" style="color: #008AFF">
              <img src="../../../assets/icons/message.png" />
              消息通知
            </div>
            <div class="flex-align-center">
              <img src="../../../assets/icons/person.png" />
              联系人
            </div>
          </div>
          <div class="rightList flex1">
            <div
              v-for="(item, index) in messageData"
              :key="'messageData' + index"
              class="flex-align-center"
            >
              <div
                class="albumBox bg-blue flex-center"
                :style="{backgroundColor: item.color}"
              >{{ item.album }}</div>
              <div class="contentBox">
                <div class="topBox flex-align-center">
                  <span>{{ item.name }}</span>
                  <span class="font12">下午 14:59</span>
                </div>
                <div class="bottomBox font10 more">{{ item.message }}</div>
              </div>
            </div>
          </div>-->
        </div>
      </div>
    </div>
    <!-- 底部数据 -->
    <div class="productData flex">
      <div class="flex1 productDataLeft flexColumn">
        <div class="listTitle flex-align-center">
          <img src="../../../assets/icons/productListIcon.png" />生产工厂
        </div>
        <div class="leftTitle flex">
          <span>生产状态数据集合</span>
          <span class="labelBox bg-yellow"></span>
          <span>生产计划量</span>
          <span class="labelBox bg-blue"></span>
          <span>产出量</span>
        </div>
        <div class="flex1">
          <div class="progressBox">
            <div
              v-for="(item, index) in productData"
              :key="'productData' + index"
              class="flex progressBoxItem"
            >
              <span class="progressTitle">{{ item.title }}</span>
              <span class="progressValue color-yellow">{{ item.value }}</span>
              <a-progress :percent="item.percent" class="progressWrap" />
              <a-button type="primary" class="searchBtn bg-blue" style="height: 24px">详情</a-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 弹窗 -->
    <div class="alarmWindowBox flex-center" v-show="isShow">
      <div class="alarmBox flexColumn animation1">
        <div class="alarmTitle flex-align-center">
          <span class="alarmTitleName">
            <a-icon type="exclamation-circle" style="color: #ffffff;marginRight: 10px" />当前警报事件
          </span>
          <span class="closeBox flex-center finger" @click="isShow = false">
            <a-icon type="close" style="color: #ff0000" />
          </span>
        </div>
        <div class="flex1 alarmContentBox flex">
          <div class="leftBox flexColumn">
            <span class="font18">报警时间：</span>
            <span class="color-fullRed font16 mb20">2021-8-21 8:30:12</span>
            <span class="font18">报警类型：</span>
            <span class="color-fullRed font16 mb20">SMT检测异常</span>
            <span class="font18">报警事件：</span>
            <span class="color-fullRed font16 mb20">焊点不良</span>
            <span class="font18">报警事件危机等级：</span>
            <span class="color-fullRed font16 mb20">高危</span>
            <span class="font18">备注：</span>
            <span class="color-fullRed font16 mb20">制程异常-SMT-AOI</span>
          </div>
          <div class="rightBox">
            <!-- <HlsVideo :src="'http://192.168.12.16:80/rtsp/D277C65B/hls.m3u8'"></HlsVideo> -->
            <div class="topBox flex">
              <div
                v-for="(item, index) in alarmInfoList"
                :key="'alarmInfoList' + index"
                class="itemBox flex"
              >
                <div class="left flexColumn">
                  <img
                    class="dubleHeight"
                    :src="require('../../../assets/icons/' + backIconName(index) +'.png')"
                  />
                  <img
                    :src="require('../../../assets/icons/' + (item.status ? 'grayClock' : 'redClock') + '.png')"
                  />
                  <img
                    :src="require('../../../assets/icons/' + (item.status ? 'blueRight' : 'grayRight') + '.png')"
                  />
                </div>
                <div class="right flexColumn">
                  <div class="rightTopBox">
                    <div class="flex-align-center color-fullRed">
                      <img style="marginRight: 5px" src="../../../assets/icons/redClock.png" />
                      {{ item.time }}
                    </div>
                    {{ item.title }}
                  </div>
                  <span :class="item.status ? 'color-gray' : 'color-fullRed'">待确认</span>
                  <span :class="item.status ? 'color-blue' : 'color-gray'">已确认</span>
                  <span>{{ item.title2 }}</span>
                  <span>{{ item.name }}</span>
                </div>
              </div>
            </div>
            <!-- 赶时间写死 -->
            <div class="bottomBox flex">
              <div class="itemBox flexColumn flex-align-center">
                <img src="../../../assets/icons/person2.png" />
                <span class="itemTitle">SMT1 IPQC组长</span>
                <span>
                  2021-08-11 09:01:00
                  <img src="../../../assets/icons/blueRight.png" />
                </span>
                <span class="itemTitle">SMT1 IPQC领班</span>
                <span>
                  2021-08-11 09:01:00
                  <img src="../../../assets/icons/blueRight.png" />
                </span>
                <span class="itemTitle">SMT1 IPQC组长</span>
                <span>
                  2021-08-11 09:01:00
                  <img src="../../../assets/icons/blueRight.png" />
                </span>
              </div>
              <div class="itemBox flexColumn flex-align-center">
                <img src="../../../assets/icons/person3.png" />
                <span class="itemTitle">SMT1 IPQC组长</span>
                <span>
                  2021-08-11 09:01:00
                  <img src="../../../assets/icons/blueRight.png" />
                </span>
                <span class="itemTitle">SMT1 IPQC领班</span>
                <span>
                  2021-08-11 09:01:00
                  <img src="../../../assets/icons/blueRight.png" />
                </span>
              </div>
              <div class="itemBox flexColumn flex-align-center">
                <img src="../../../assets/icons/person4.png" />
                <span class="itemRedTitle">总经理</span>
                <span class="itemRedTitle">副总经理</span>
                <span class="itemTitle">常务副总</span>
                <span>
                  2021-08-11 09:01:00
                  <img src="../../../assets/icons/blueRight.png" />
                </span>
                <span class="itemTitle">厂长</span>
                <span>
                  2021-08-11 09:01:00
                  <img src="../../../assets/icons/blueRight.png" />
                </span>
              </div>
              <div class="progressBg">
                <img src="../../../assets/icons/progressBg.png" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import flvjs from 'flv.js'
import HlsVideo from '@/components/_Hlsvideo/Hlsvideo'
import { putAction, postAction, getAction } from '@/api/manage'
// import ImitateNav from '@/components/_ImitateNav/ImitateNav'
import {
  ChartCard,
  MiniArea,
  MiniBar,
  MiniProgress,
  RankList,
  Bar,
  Trend,
  NumberInfo,
  MiniSmoothArea,
} from '@/components'
export default {
  name: 'runborder',
  components: {
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    NumberInfo,
    MiniSmoothArea,
    HlsVideo,
    // ImitateNav
  },
  data() {
    return {
      seqList: [
        { id: 1, seqName: '今日' },
        { id: 2, seqName: '昨日' },
        { id: 3, seqName: '近七天' },
        { id: 4, seqName: '全部' },
      ],
      orderFile: [],
      current: 3,
      openAlarmWindow: false,
      visible: true,
      confirmLoading: false,
      loading: true,
      searchData: '',
      orderList: [],
      alermFile: [], //报警
      orderNum: [],
      realTimeList: [
        { type: '生产', title: 'SMT-L4 上扳机 备料到达', status: '5%', time: '08-30 13:35:15' },
        { type: '质检', title: 'Side5 QA抽检入库 ABS-000002', status: '5%', time: '08-30 13:30:28' },
        { type: '生产', title: '新增技嘉订单 AB-0256 开始备料', status: '备料', time: '08-30 12:58:19' },
        { type: '质检', title: 'Side5 QA抽检入库 ABS-000002', status: '5%', time: '08-30 13:30:28' },
        { type: '生产', title: '新增技嘉订单 AB-0256 开始备料', status: '备料', time: '08-30 12:58:19' },
        { type: '质检', title: 'Side5 QA抽检入库 ABS-000002', status: '5%', time: '08-30 13:30:28' },
        { type: '质检', title: 'Side5 QA抽检入库 ABS-000002', status: '5%', time: '08-30 13:30:28' },
        { type: '生产', title: '新增技嘉订单 AB-0256 开始备料', status: '备料', time: '08-30 12:58:19' },
        { type: '质检', title: 'Side5 QA抽检入库 ABS-000002', status: '5%', time: '08-30 13:30:28' },
      ],
      productData: [
        { title: 'SMT计划和产出', value: 1000, percent: 20 },
        { title: 'DIP计划和产出', value: 1000, percent: 62 },
        { title: 'TEST计划和产出', value: 1000, percent: 30 },
        { title: 'PACk计划和产出', value: 1000, percent: 45 },
        { title: '入库量和发货数', value: 100, percent: 10 },
      ],
      messageData: [
        {
          name: '生产一组',
          time: 1628578511075,
          message: '[分享]进度实时在线监控 分享了一个链接,赶快点击查看...',
          album: 'sc',
          color: '#2175FF',
        },
        { name: '质检五组', time: 1628578511075, message: '刚刚的文件再发我一次', album: '质', color: '#2175FF' },
        {
          name: 'SMT办公室',
          time: 1628578511075,
          message: '生产进度怎么样了，有人能跟我说一下情况吗，我这边...',
          album: 'SMT',
          color: '#FFB811',
        },
        {
          name: '黄渤',
          time: 1628578511075,
          message: '把你们组的生产计划跟我这边对一下',
          album: '渤',
          color: '#FF5757',
        },
      ],
      alarmInfoList: [
        { time: '15:00', title: '责任方', status: 1, title2: 'SMT1线-工人', name: '廖勇强' },
        { time: '30:00', title: '临时整改措施', status: 1, title2: '临时预备方案', name: 'A、B、C...' },
        { time: '08:00:00', title: '长期处理对策', status: 0, title2: '设置稳定的风险防控措施', name: ' A、B...' },
      ],
      personProgress: [],
      currentIndex: 0,
      listFlag: false,
      stopLoop: false,
      dom: null,
      timeOut: null,
      isShow: false,
    }
  },
  created() {
    this.orderLists()
    this.almList()
    this.getStatistcs()
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
  },
  mounted() {
    this.dom = document.querySelector('.centerBox')
    // this.switchListIndexLoop()
    window.onresizeArr.push(this.lisOrderFullScreen)
    // if (flvjs.isSupported()) {
    //   var videoElement = document.getElementById('videoElement')
    //   this.flvPlayer = flvjs.createPlayer({
    //     type: 'flv',
    //     isLive: true,
    //     hasAudio: false,
    //     url: 'http://192.168.12.88:8088/rtsp/400E51BB.flv',
    //   })
    //   this.flvPlayer.attachMediaElement(videoElement)
    //   this.flvPlayer.load()
    //   this.flvPlayer.play()
    // }
  },
  computed: {
    bgIndex() {
      let index = this.currentIndex + 1
      if (index > 8) {
        index = index - 8 * Math.floor(index / 8)
      }
      return index || 1
    },
    reverseSum() {
      return this.allSum.reverse()
    },
  },
  methods: {
    switchListIndex(index) {
      this.currentIndex = index
    },
    fullScreenCenter() {
      this.util.fullScreen(this.dom)
    },
    play() {
      this.flvPlayer.play()
    },

    //订单列表
    orderLists() {
      let self = this
      let params = Object.assign({
        startTime: '',
        endTime: '',
        pageNum: '1',
        pageSize: '100',
        custName: '',
      })
      console.log('请求参数：', params)
      postAction('http://192.168.11.142:8004/api/manage/order/list', params).then((res) => {
        if (res.code == 200) {
          self.orderList = res.data.list
          console.log(self.orderList)
        } else {
          self.$message.warning(res.msg)
        }
      })
    },

    alarmWindow(item) {
      console.log(item)
      this.isShow = true
    },

    //生产报警
    almList() {
      let self = this
      let params = Object.assign({
        alertTypeNames: '2',
      })
      postAction('http://192.168.11.142:8000/api/alert/head/queryByAlertTypeName', params).then((res) => {
        if (res.code == 200) {
          self.alermFile = res.data
        } else {
          self.$message.warning(res.msg)
        }
      })
    },

    //订单量
    getStatistcs() {
      let self = this
      getAction('http://192.168.11.142:8000/api//manage/order/statistics').then((res) => {
        if (res.code == 200) {
          self.orderNum = res.data.orderData
        } else {
          self.$message.warning(res.msg)
        }
      })
    },

    /* 单流流程全屏监听 */
    lisOrderFullScreen() {
      console.log(this.dom.offsetHeight, window.screen.height)
      if (this.dom.offsetHeight === window.screen.height) {
        clearTimeout(this.timeOut)
        this.stopLoop = true
      } else {
        this.stopLoop = false
        this.switchListIndexLoop()
      }
    },
    allSeq(index) {
      this.current = index
      console.log(this.current)
      //一天是86400秒   故n天前的时间戳为
      //今天开始时间
      var nowStart0 = new Date().setHours(0, 0, 0, 0)
      var nowStart1 = `2021-${this.util.timeFormat(nowStart0)}:00`
      //今天结束时间
      var nowEnd0 = new Date().setHours(23, 59, 59, 59)
      var nowEnd1 = `2021-${this.util.timeFormat(nowEnd0)}:59`
      console.log(nowStart1 + '分割' + nowEnd1)
      //昨日开始时间
      var yestStart0 = nowStart0 - 86400 * 1000
      var yestStart1 = `2021-${this.util.timeFormat(yestStart0)}:00`
      //昨日结束时间
      var yestEnd0 = nowEnd0 - 86400 * 1000
      var yestEnd1 = `2021-${this.util.timeFormat(yestEnd0)}:59`
      console.log(yestStart1 + '分割' + yestEnd1)
      //近七天开始时间
      var servenStart0 = nowStart0 - 86400 * 1000 * 7
      var servenStart1 = `2021-${this.util.timeFormat(servenStart0)}:00`
      //近七天结束时间
      var servenEnd0 = nowEnd0 - 86400 * 1000 * 7
      if (this.current == 0) {
        let self = this
        let params = Object.assign({
          startTime: nowStart1,
          endTime: nowEnd1,
          pageNum: '1',
          pageSize: '100',
          custName: '',
        })
        console.log('请求参数：', params)
        postAction('http://192.168.11.142:8004/api/manage/order/list', params).then((res) => {
          if (res.code == 200) {
            self.orderList = res.data.list
            console.log(self.orderList)
          } else {
            self.$message.warning(res.msg)
          }
        })
      } else if (this.current == 1) {
        let self = this
        let params = Object.assign({
          startTime: yestStart1,
          endTime: yestEnd1,
          pageNum: '1',
          pageSize: '100',
          custName: '',
        })
        console.log('请求参数：', params)
        postAction('http://192.168.11.142:8004/api/manage/order/list', params).then((res) => {
          if (res.code == 200) {
            self.orderList = res.data.list
            console.log(self.orderList)
          } else {
            self.$message.warning(res.msg)
          }
        })
      } else if (this.current == 2) {
        let self = this
        let params = Object.assign({
          startTime: servenStart1,
          endTime: nowEnd1,
          pageNum: '1',
          pageSize: '100',
          custName: '',
        })
        console.log('请求参数：', params)
        postAction('http://192.168.11.142:8004/api/manage/order/list', params).then((res) => {
          if (res.code == 200) {
            self.orderList = res.data.list
            console.log(self.orderList)
          } else {
            self.$message.warning(res.msg)
          }
        })
      } else {
        this.orderLists()
      }
    },
    backIconName(index) {
      switch (index) {
        case 0:
          return 'person1'
        case 1:
          return 'schedule'
        case 2:
          return 'calendar'
      }
    },
    switchListIndexLoop() {
      if (this.stopLoop) return
      this.timeOut = setTimeout(() => {
        clearTimeout(this.timeOut)
        if (this.stopLoop) return
        if (this.currentIndex >= this.orderList.length - 1) {
          this.currentIndex = 0
        } else {
          this.currentIndex++
        }
        this.switchListIndexLoop()
      }, 3000)
    },
  },
}
</script>

<style lang="less">
.runborder {
  .alarmWindowBox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    .alarmBox {
      position: absolute;
      // width: 1260px;
      // height: 583px;
      overflow: hidden;
      .alarmTitle {
        height: 40px;
        justify-content: space-between;
        color: white;
        font-size: 18px;
        .alarmTitleName {
          text-indent: 20px;
          line-height: 40px;
          height: 100%;
          width: 250px;
          background: linear-gradient(-135deg, transparent 30px, red 0) top right;
        }
        .closeBox {
          height: 24px;
          width: 24px;
          border: red 1px solid;
        }
      }
      .alarmContentBox {
        background-color: black;
        overflow: hidden;
        border-bottom: 1px solid red;
        border-top: 1px solid red;
        .leftBox {
          height: 100%;
          width: 300px;
          padding: 20px;
          box-sizing: border-box;
          color: white;
        }
        .rightBox {
          height: 100%;
          width: 960px;
          .topBox {
            height: 40%;
            .itemBox {
              padding-top: 20px;
              width: 33.33%;

              .left {
                flex: 1;
                padding: 5px;
                align-items: flex-end;
                .dubleHeight {
                  width: 46px;
                  height: 46px;
                }
                img {
                  width: 20px;
                  margin-bottom: 6px;
                }
              }
              .right {
                color: white;
                flex: 2;
                padding: 5px;
                font-size: 16px;
                .rightTopBox {
                  img {
                    height: 16px;
                  }
                  height: 46px;
                  margin-bottom: 6px;
                }
                span {
                  font-size: 14px;
                  height: 20px;
                  margin-bottom: 6px;
                }
              }
            }
          }
          .bottomBox {
            height: 60%;
            background-color: white;
            padding-top: 20px;
            position: relative;
            .progressBg {
              position: absolute;
              top: 53px;
              left: 143px;
              width: 70%;
              height: 30px;
              img {
                height: 100%;
                width: 100%;
              }
            }
            .itemBox {
              flex: 1;
              z-index: 3;
              span {
                text-align: center;
                height: 24px;
                line-height: 24px;
                img {
                  height: 14px;
                  margin-left: 6px;
                }
              }
              .itemRedTitle {
                width: 120px;
                color: red;
                border: 1px solid red;
                border-radius: 4px;
                margin-top: 6px;
              }
              .itemTitle {
                padding: 0 10px;
                background-color: #494755;
                color: white;
                margin-top: 6px;
                border-radius: 4px;
              }
            }
          }
        }
        // width: 960px;
        // max-height: 540px;
      }
    }
  }
  margin-top: 20px;
  padding-bottom: 24px;
  /* 订单数据 */
  .orderDataBox {
    height: 110px;
    justify-content: space-between;
    .orderDataBoxItem {
      width: 19.2%;
      border-radius: 4px;
    }
  }
  /* 列表数据 */

  .listData {
    display: -webkit-box;
    margin-top: 10px;
    min-height: 514px;
    height: 514px;
    display: -webkit-box !important;
    .listDataLeft {
      width: 300px;
      // height: 100%;
      height: 514px;
      float: left;
      .orderListBox {
        overflow: auto;
        background-color: white;
        .active {
          background-color: #f5f5f7;
          color: #2175ff;
          .itemTitle {
            color: #2175ff;
          }
        }
        & > div {
          cursor: pointer;
          height: 32px;
          line-height: 32px;
          padding: 0 10px;
          font-size: 14px;
          .itemTitle {
            width: 48%;
            color: #888888;
          }
          .itemValue {
            width: 20%;
            text-align: right;
          }
          .itemTime {
            width: 30%;
            text-align: right;
            overflow: hidden;
          }
        }
      }
      .listTitle {
        padding: 0 5px;
        ul {
          margin: 0;
          li {
            text-align: right;
            padding: 0 5px;
            float: left;
            font-size: 12px;
            cursor: pointer;
          }
        }
        .styleName {
          font-size: 16px;
          color: #2175ff;
        }
      }
    }
    .listDataRight {
      width: 300px;
      height: 100%;
      float: right;
      background-color: white;
      .ant-tabs-bar {
        margin: 0;
      }
      .ant-tabs-content {
        margin-bottom: 10px;
      }
      .itemBox {
        margin-top: 10px;
        height: 80px;
        padding-left: 30px;
        .itemBottom {
          padding: 0 10px;
          text-align: right;
          justify-content: space-between;
        }
      }
      .productDataRight {
        width: 300px;
        height: 100%;
        float: right;
        background-color: white;
        overflow: auto;
        .rightNav {
          height: 40px;
          padding: 0 10px;
          border-bottom: 1px solid #f0f0f0;
          align-items: center;
          div {
            margin-right: 20px;
            cursor: pointer;
            img {
              margin-right: 6px;
            }
          }
        }
        .rightList {
          & > div {
            height: 36px;
            padding: 0 10px;
            margin: 7px 0;
            .albumBox {
              height: 30px;
              min-width: 30px;
              border-radius: 4px;
              color: white;
              margin-right: 10px;
            }
            .contentBox {
              flex: 1;
              .topBox {
                justify-content: space-between;
              }
              .bottomBox {
                color: #888888;
                width: 240px;
                position: relative;
                left: -22px;
                top: -2px;
              }
            }
          }
        }
      }
    }
    /* 流程 */
    .listDataCenter {
      flex: 1;
      height: 100%;
      height: 514px;
      .centerBox {
        height: 100%;
        margin: 0 10px;
        background-color: white;
        .centerTitle {
          .centerTitleText {
            height: 36px;
            img {
              margin-right: 6px;
            }
          }
          height: 36px;
          padding: 0 16px;
          line-height: 36px;
          color: #888888;
          font-size: 16px;
          justify-content: space-between;
          img {
            width: 16px;
            height: 16px;
          }
        }
        .centerLabelBox {
          height: 36px;
          padding: 0 16px;
          font-size: 14px;
          justify-content: flex-end;
        }
        .processBox {
          height: 450px;
          .progressImgBox {
            width: 800px;
            .progressFlow {
              width: 200px;
              height: 100px;
              line-height: 100px;
              text-align: center;
              float: left;
            }
            img {
              display: block;
              height: 100%;
              margin: 0 auto;
            }
          }
        }
      }
    }
  }
  /* 列表搜索 */
  .listSearch {
    .searchBox {
      background-color: white;
      .ant-input-affix-wrapper {
        width: 70%;
        float: none;
        margin-left: 10px;
      }
      .searchBtn {
        margin: 0;
        margin-right: 10px;
      }
    }
  }
  /* 底部栏 */
  .productData {
    margin-top: 10px;
    height: 300px;
    .productDataLeft {
      background: white;
      .leftTitle {
        font-size: 14px;
        font-weight: 700;
        height: 40px;
        padding: 0 10px;
        border-bottom: 1px solid #f0f0f0;
        align-items: center;
      }
      .progressBox {
        height: 100%;
        padding: 20px;
        & > div {
          border-bottom: 1px solid #f0f0f0;
          align-items: center;
          height: 36px;
          box-sizing: border-box;
          .progressTitle {
            width: 120px;
            // flex: 2;
          }
          .progressValue {
            width: 40px;
            // flex: 1;
          }
          .progressWrap {
            margin-right: 20px;
            flex: 1;
            .ant-progress-text {
              color: #2175ff;
            }
          }
        }
      }
    }
  }
}
</style>